<script setup lang="ts" name="JxtechImportDialogExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechImportDialog } from "@whjxtech/jxtech-component";
import { saveUploadFileUrl, downloadFileUrl } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";

const emit = defineEmits<{
  /**双向数据绑定 */
  (e: "update:visible", val: Boolean): void;
  /**导入成功触发事件 */
  (e: "importSuccess", response: any, file: any, fileList: any): void;
  /**导入失败触发事件 */
  (e: "importError", err: any, file: any, fileList: any): void;
}>();

interface JxtechImportDialogExtProps {
  /**dialog对话框是否显示 */
  visible?: boolean;
  /**dialog对话框宽度 */
  width?: string;
  /**dialog对话框标题 */
  dialogTitle?: string;
  /**上传文件url */
  action: string;
  /**标题 */
  importTips?: string | number;
  /**描述 */
  description?: string;
  /**警告 */
  alert?: string;
  /**导入文件所需的额外数据 */
  extraData?: object;
  /**上传文件接收的name */
  name?: string;
}

const props = withDefaults(defineProps<JxtechImportDialogExtProps>(), {
  visible: false,
  width: "1200px",
  dialogTitle: "导入文件",
  name: "files"
});

const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  value => {
    visibleModelValue.value = value;
  }
);
watch(visibleModelValue, value => {
  emit("update:visible", value);
  if (value) {
    // nextTick(() => {});
  }
});

const JxtechImportDialogExtState = reactive({
  /**token */
  accessToken: getAccessToken() || "",
  onImportSuccess: (response: any, file: any, fileList: any) => {
    emit("importSuccess", response, file, fileList);
  },
  onImportError: (err: any, file: any, fileList: any) => {
    emit("importError", err, file, fileList);
  }
});
</script>

<template>
  <jxtech-import-dialog
    v-model:visible="visibleModelValue"
    :width="width"
    :dialog-title="dialogTitle"
    :action="action"
    :access-token="JxtechImportDialogExtState.accessToken"
    :import-tips="importTips"
    :description="description"
    :alert="alert"
    :extra-data="extraData"
    @import-success="JxtechImportDialogExtState.onImportSuccess"
    @import-error="JxtechImportDialogExtState.onImportError"
  ></jxtech-import-dialog>
</template>

<style lang="scss" scoped></style>
